<template>
	<view class="topBar">
	<!-- 状态栏占位 -->
	<view  :style="{height:statusBarHeight + 'px'}"></view>
	
	<!-- 时光胶囊高度 -->
	<view class="top" :style="{height:statusBarHeight + 'px'}">
		<uni-icons type="left" size="32" class="icons" @click="goBack"></uni-icons>
		<text>{{title}}</text>
	</view>
	</view>
</template>

<script setup>
import UniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'

const props =	defineProps({
		title:{
			type:String,
			default:''
		},
		// 默认返回上一页，'home' 切换到首页
		backType: {
				type: String,
				default: 'back' 
			}
	})
	const system = uni.getSystemInfoSync()
	// 状态栏高度
	const statusBarHeight = system.statusBarHeight
	// const {hieght} = uni.getMenuButtonBoundingClientRect()
	// const topHeight = (top - statusBarHeight) * 2 - hieght
	const goBack = ()=>{
	if(props.backType === 'back'){
			uni.navigateBack()
	}else if(props.backType === 'home'){
		uni.switchTab({
			url:"/pages/payfor/payfor"
		})
	}
	}
</script>

<style lang="less" >
	.topBar{

	.top {
		display: flex;
		align-items: center;
		
		.icons{
		    width: 64rpx;
			height: 64rpx;
			margin-left: 32rpx;
			margin-right: 212rpx;
			display: flex;
			align-items: center;

		}
		text{
			width: 136rpx;
			height: 34rpx;
			text-align: center;
			line-height: 34rpx;
			font-weight:500;
			font-size: 34rpx;
			color: #333;
			font-family: "Source Han Sans CN-Medium", "uniicons", sans-serif;

		}
	}
	}
</style>